<style lang="scss">
.z-dragxml-img-upload {
  .el-upload--picture-card {
    background-color: transparent;
    border: none;
    width: max-content;
    height: max-content;
  }
  .el-upload--picture-card-con {
    width: 74px;
    height: 74px;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;

    cursor: pointer;
    vertical-align: top;
    //line-height: 78px;
    i {
      margin-top: 20px;
    }
  }
}
</style>

<template>
  <div class="z-dragxml-com z-dragxml-com-auto z-dragxml-img-upload"
       :class="[zdrag__state_cls()]"
       @mouseenter.stop="zdrag__onMouseEnter"
  >
<!--    {{uuid}}-->
<!--{{    getImgUI()}}-->
    <z-cell-item v-bind="zdrag__form_config"
                 :label="zdrag__GET_CONFIG('ui.label', '')"
                 :desc="zdrag__GET_CONFIG('ui.desc', '')"
                 :ui="zdrag__GET_CONFIG('ui', {})"
                 :hidden-label="zdrag__GET_CONFIG('ui.hiddenLabel', false)"
    >
      <cus-uploader :ui="getImgUI()"></cus-uploader>
    </z-cell-item>
  </div>
</template>

<script>
import {ZDragCommonMixin} from "@/plugins/z-dragxml/mixins";
import CusUploader from "@/components/CustomForm/CusUploader.vue";
import {createZDragOldComponent} from "@/plugins/z-dragxml/factory";

export default createZDragOldComponent({
  name: 'ZDragImgUpload',
  components: {CusUploader},
  DRAG_FIELD: true,
  DRAG_DATASET() {
    return {
      columnMax: 1
    }
  },
  DRAG_LABEL_XML() {
    return `<div class="z-dragxml-row">
<svg t="1642815509977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2176" width="16" height="16"><path d="M712.5 788.8H194.2c-22.5 0-43-8.8-58.7-23.3l146.9-183.2c7.9-9.8 19-15.5 31.2-15.9 12.2-0.4 23.6 4.6 32 13.9l12.9 14.3c17.1 19 41 28.8 65.8 27.1 24.7-1.7 47.2-14.9 61.8-36L560.2 478c8-11.7 20.5-18.4 34.1-18.5h0.3c13.6 0 26 6.6 34.1 18.1l76.7 108.9c6.8 9.6 19.6 11.5 28.6 4.3 8.9-7.1 10.7-20.4 4-29.9L661.3 452c-15.9-22.5-40.1-35.4-66.7-35.4h-0.5c-26.8 0.2-51.1 13.4-66.8 36.2l-74.1 107.8c-7.4 10.8-18.9 17.5-31.6 18.4-12.6 0.9-24.9-4.2-33.6-13.8l-12.9-14.3c-16.2-18-39.1-28-62.7-27.3-23.6 0.7-45.8 12-61.1 31l-140 174.7c-4-10.7-6.3-22.5-6.3-34.7V328.9c0-52 40-94.2 89.2-94.2H767c49.3 0 89.2 42.2 89.2 94.2v181.3c0 11.9 9.1 21.5 20.3 21.5s20.3-9.6 20.3-21.5V328.9c0-75.7-58.2-137.1-129.9-137.1H194.2c-71.7 0-129.9 61.4-129.9 137.1v365.7c0 75.7 58.2 137.1 129.9 137.1h518.3c11.2 0 20.3-9.6 20.3-21.5 0-11.8-9.1-21.4-20.3-21.4z" p-id="2177"></path><path d="M926.6 672.7h-52.5v-54.5c0-19.4-14.9-35.1-33.2-35.1s-33.2 15.7-33.2 35.1v54.5h-53.6c-18.3 0-33.2 15.7-33.2 35.1 0 19.4 14.9 35.1 33.2 35.1h53.6v53.9c0 19.4 14.9 35.1 33.2 35.1s33.2-15.7 33.2-35.1v-53.9h52.5c18.3 0 33.2-15.7 33.2-35.1 0-19.4-14.9-35.1-33.2-35.1zM256.5 416.1c-35 0-63.6-28.5-63.6-63.6 0-35 28.5-63.6 63.6-63.6s63.6 28.5 63.6 63.6-28.6 63.6-63.6 63.6z m0-89.2c-14.1 0-25.6 11.5-25.6 25.6 0 14.1 11.5 25.6 25.6 25.6 14.1 0 25.6-11.5 25.6-25.6 0-14.1-11.5-25.6-25.6-25.6z" p-id="2178"></path></svg>
<div class="z-dragxml-label__name">图片上传</div>
</div>`
  },
  mixins: [
      ZDragCommonMixin
  ],
  methods: {
    DRAG_CONFIG() {
      let obj = CusUploader.CUS_EDITOR() ?? { props: {} }
      Reflect.deleteProperty(obj.props, 'type')
      return obj
    },
    getImgUI() {
      let ui = ZY.JSON5.parse(ZY.JSON5.stringify(this.zdrag__cus_config.ui))
      ui.widgetConfig = {
        ...ui.widgetConfig,
        multiple: true,
        ['list-type']: 'picture-card'

      }
      return ui
    }
  },
  data() {
    return {
      id: ZY.rid(6),
      ui: {
        label: '图片上传',
        widgetConfig: {
        }
      }
    }
  }
}, {
  DRAG_EXPORT() {
    return {
      ui: {
        widget: 'CusUploader'
      }
    }
  },
})
</script>
